<template>
  <div class="detail-box-content">
    <div class="title">
      <van-icon name="arrow-left" @click="$router.back()" />
      <h2>藏品合成</h2>
      <router-link to='/me/collectRecord' @click="$router.push('/Recordlist')">合成记录</router-link>
    </div>
    <div class="draw-warp">
      <van-pull-refresh v-model="formData.refreshing" @refresh="onRefresh">
        <van-list v-model:loading="formData.loading" :finished="formData.finished" @load="onLoad" finished-text="没有更多" v-if="DataList.length>=1">
          <van-row justify="space-between" class="item-warp" v-for="(item,index) in DataList" :key="index" @click="GoMore(item.synthesisCollectionId)">
            <van-col span="7" class="img-warp" :style="'background-image:url('+item.collection.cover+') '">

              <!-- <img :src="item.collection.cover" alt="" v-if="VideoIndexOf(item.collection.cover)"> -->
              <vdeo :src="item.collection.cover" v-if="!VideoIndexOf(item.collection.cover)" />
            </van-col>
            <van-col span="16">
              <van-row gutter="20">
                <van-col span="24">
                  <h2>{{item.collection.name}}</h2>
                </van-col>
                <van-col span="24" class="pad-left">
                  <!-- <i class="purple"></i> -->
                  <span>限量 {{item.collection.totalNumber}}</span>
                  <span style="margin:10px 10px 0px"> | </span>
                  <span>剩余 {{item.collection.surplusNumber}}</span>
                </van-col>
                <van-col span="24" class="endtime">
                  <!-- <i class="orange"></i> -->
                  <span>截止时间: </span>
                  <span>{{item.endTime}}</span>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </van-list>
        <van-empty :image="require('@/assets/image/none.png')" description="暂无数据！" v-if="DataList.length<=0" />
      </van-pull-refresh>
    </div>

  </div>
</template>
<script>
import { reactive, computed, onMounted, ref } from 'vue'
import { useStore } from "vuex"
import { useRouter } from "vue-router"
import { synthesisIpage } from "@/api/public"
import { formMonth, VideoIndexOf, } from "@/utils/phone"
import { Toast } from "vant"
import vdeo from "@/components/video.vue"
export default {
  components: { vdeo },
  setup() {
    const store = useStore();
    const router = useRouter()
    const user_info = computed(() => {
      return store.getters.user_info
    })
    const formData = reactive({
      buytxt: '立即购买',
      page: 1,
      size: 10,
      loading: true,
      finished: false,
      refreshing: false,
    })
    const DataList = ref([])
    const query = computed(() => { })
    const onRefresh = () => {
      formData.page = 0
      formData.loading = true
      formData.finished = false
      DataList.value = []
      onLoad()
    }
    const onLoad = async () => {
      const data = {
        // userId: user_info.id,
        pageNum: formData.page,
        pageSize: formData.size
      }
      const res = await synthesisIpage(data)

      formData.page++
      formData.total = res.data.data.total
      DataList.value = DataList.value.concat(res.data.data.records)
      formData.loading = false
      if (formData.refreshing) {

        formData.refreshing = false
      }
      if (formData.total <= DataList.value.length) {
        formData.finished = true;
      }
    }

    onMounted(() => {
      onLoad()
    })


    const GoMore = (id) => {
      router.push({
        path: '/composed',
        query: {
          id: id
        }
      })
    }

    return {
      onLoad,
      query,
      formData,
      GoMore,
      DataList,
      onRefresh,
      VideoIndexOf
    }
  }
}
</script>
<style lang="less" scoped>
.img-warp {
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  img {
    height: 100%;
  }
}
.endtime {
  font-size: 12px;
  position: relative;
}
.detail-box-content {
  .title {
    padding: 30px;
    background: transparent;
    display: flex;
    color: white;
    align-items: center;
    justify-content: space-between;
    a {
      color: #999;
    }
    h2 {
      margin: 0;
      font-weight: normal;
    }
    &:deep(.van-icon) {
      font-weight: normal;
      font-size: 0.6rem;
    }
    &:deep(.van-icon-label-o) {
      margin-right: 20px;
    }
  }
  .draw-warp {
    width: 92%;
    margin: 0.5rem auto;

    .item-warp {
      padding: 20px;
      background-size: 100% 100%;
      margin-bottom: 0.5rem;
      background: #282a2c;
      border-radius: 20px;
      img {
        width: 2.5rem;
        border-radius: 10px;
      }
      .pad-left {
        font-size: 26px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #b9c4c7;
        line-height: 48px;
        // padding: 0px 0.3rem;
        position: relative;
        display: flex;
        align-items: center;
      }
      i {
        display: inline-block;
        font-weight: bolder;
        font-size: 30px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        left: -0rem;
        top: 55%;
      }
      .purple {
        background: linear-gradient(to top, #3fbbfe, #a541ff, #a541ff);
      }
      .orange {
        background: linear-gradient(to top, #fdc2d8, #fca65e, #ff7983);
      }
      span {
        color: #f5f5f5;
        margin-top: 0.3rem;
        font-size: 30px;
        display: inline-block;
      }
      h2 {
        padding-left: 0px;
        color: white;
        font-weight: 400;
        font-size: 34px;
        margin: 15px 0px 0px;
      }
    }
  }
}
</style>